<template>
  <div>
    <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-item v-show="true">
        <a-input v-decorator="['id']"/>
      </a-form-item>
      <a-form-item label="标题">
        <a-input v-decorator="['title',{rules: [{required: true,message:'请输入标题'}]}]"/>
      </a-form-item>
      <a-form-item label="主题">
        <a-select v-decorator="['topicId',{rules: [{required: true,message:'请选择主题'}]}]">
          <a-select-option v-for="(item) in topicList" :value="item.id" :key="item.id">{{ item.topicName }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="标题图">
        <ImgUpload ref="imgUpload" @change="handleChange" source="ARTICLE"/>
        <a-input v-decorator="['titlePic']" />
      </a-form-item>
      <a-form-item label="描述">
        <a-textarea v-decorator="['description']" rows="3"/>
      </a-form-item>
      <a-form-item label="来源名称">
        <a-input v-decorator="['sourceName']"/>
      </a-form-item>
      <a-form-item label="来源地址">
        <a-input v-decorator="['sourceUrl']"/>
      </a-form-item>
      <a-form-item label="标签">
        <a-select v-decorator="['tagList']" mode="multiple">
          <a-select-option v-for="(item,index) in tagList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态">
        <a-radio-group v-decorator="['publishStatus',{ initialValue: 'PUBLISHED'}]">
          <a-radio value="PUBLISH">草稿</a-radio>
          <a-radio value="PUBLISHED">已发布</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="SEO关键字">
        <a-textarea v-decorator="['seoKeys']" rows="2"/>
      </a-form-item>
      <a-form-item label="SEO描述">
        <a-textarea v-decorator="['seoDesc']" rows="2"/>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { getTopicListType, getTagList, saveArticle } from '@/api/content'
import { ImgUpload } from '@/components'

export default {
  name: 'ArticleForm',
  data () {
    return {
      form: this.$form.createForm(this),
      topicList: [],
      tagList: []
    }
  },
  components: {
    ImgUpload
  },
  methods: {
    setForm (vals) {
      this.$refs.imgUpload.setImg([{
        uid: '-1',
        name: vals.titlePic,
        status: 'done',
        url: vals.titlePicView
      }])
      if (vals.articleLabelVos) {
        var tagIds = []
        for (var i in vals.articleLabelVos) {
          tagIds.push(vals.articleLabelVos[i].id)
        }
        this.form.setFieldsValue({
          ...vals,
          tagList: tagIds
        })
      } else {
        this.form.setFieldsValue(vals)
      }
    },
    resetForm () {
      this.form.resetFields()
    },
    save (data) {
      this.form.validateFields((err, values) => {
        if (!err) {
          saveArticle({
            ...values,
            articleType: data.articleType,
            content: data.content
          }).then(res => {
            if (res.ok) {
              this.$message.info('保存成功')
            }
          })
        }
      })
    },
    handleChange (info) {
      const file = info[0]
      if (!file) {
        return
      }
      this.form.setFieldsValue({
        'titlePic': file.fileName
      })
    }
  },
  mounted () {
    getTopicListType('ARTICLE').then(res => {
      if (res.ok) {
        this.topicList = res.data
      }
    })
    getTagList({}).then(res => {
      this.tagList = res.data
    })
  }
}
</script>
